<template>
  <ContentWrap>

    <el-form
      ref="formRef"
      :model="formData"
    >

      <el-form-item label="姓名：" prop="name"  style="width: 50%;">
        <el-input v-model="formData.name" placeholder="请输入姓名" />
      </el-form-item>

      <el-form-item label="性别：" prop="sex" style="width: 50%;">
        <el-select v-model="formData.sex" placeholder="请选择">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄：" prop="age"  style="width: 50%;">
        <el-input v-model="formData.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile"  style="width: 50%;">
        <el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号" />
      </el-form-item>

      <el-form-item label="户籍：" prop="censusRegister"  style="width: 50%;">
        <el-select v-model="formData.censusRegister"  placeholder="请选择">
          <el-option
            :key="'重庆本地'"
            :label="'重庆本地'"
            :value="'重庆本地'"
          />
          <el-option
            :key="'外地'"
            :label="'外地'"
            :value="'外地'"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="户口：" prop="registeredHk" style="width: 50%;">
        <el-select v-model="formData.registeredHk"  placeholder="请选择">
          <el-option
            :key="'城镇户口'"
            :label="'城镇户口'"
            :value="'城镇户口'"
          />
          <el-option
            :key="'农村户口'"
            :label="'农村户口'"
            :value="'农村户口'"
          />
        </el-select>
      </el-form-item>


<!--   房产   -->
<!--      <el-form-item label="按揭房所在区域" prop="area" style="width: 50%;">-->
<!--        <el-input v-model="formData.area" placeholder="请输入按揭房所在区域" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="土地类型" prop="landTypes" style="width: 50%;">-->
<!--        <el-input v-model="formData.landTypes" placeholder="请输入土地类型" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="房屋结构" prop="buildingStructure" style="width: 50%;">-->
<!--        <el-input v-model="formData.buildingStructure" placeholder="请输入房屋结构" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="房屋类型" prop="houseType" style="width: 50%;">-->
<!--        <el-select v-model="formData.houseType" placeholder="请选择房屋类型">-->
<!--          <el-option label="请选择字典生成" value="" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="建筑面积" prop="areaOfStructure" style="width: 50%;">-->
<!--        <el-input v-model="formData.areaOfStructure" placeholder="请输入建筑面积" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="首套房或者二套房" prop="oneOrTwo" style="width: 50%;">-->
<!--        <el-select v-model="formData.oneOrTwo"  placeholder="请选择">-->
<!--          <el-option-->
<!--            :key="'首套房'"-->
<!--            :label="'首套房'"-->
<!--            :value="'首套房'"-->
<!--          />-->
<!--          <el-option-->
<!--            :key="'二套房'"-->
<!--            :label="'二套房'"-->
<!--            :value="'二套房'"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="按揭时间" prop="mortgageTime" style="width: 50%;">-->
<!--        <el-date-picker-->
<!--          v-model="formData.mortgageTime"-->
<!--          type="date"-->
<!--          value-format="x"-->
<!--          placeholder="选择按揭时间"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="贷款金额" prop="loanAmount" style="width: 50%;">-->
<!--        <el-input v-model="formData.loanAmount" placeholder="请输入贷款金额" />-->
<!--      </el-form-item>-->


    </el-form>

    <el-button @click="submitForm" type="primary" >保存用户</el-button>


  </ContentWrap>



</template>

<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as clientpoolApi from '@/api/hutai/clientpool'


// defineOptions({ name: 'Product' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const formRef = ref() // 表单 Ref
const formData = ref({
  id: undefined,
  name: undefined,
  sex: undefined,
  age: undefined,
  mobile: undefined,
  censusRegister: undefined,
  registeredHk: undefined,

  area:undefined,
  landTypes:undefined,
  buildingStructure:undefined,
  houseType:undefined,
  areaOfStructure:undefined,
  oneOrTwo:undefined,
  mortgageTime:undefined,
  loanAmount:undefined

})



/** 查询列表 */
const getList = async () => {
  resetForm()
}

const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return

  try {
     const data = formData.value
    await clientpoolApi.createUsers(data)
    message.success(t('common.updateSuccess'))
    resetForm();
  } finally {

  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    name: undefined,
    sex: undefined,
    age: undefined,
    mobile: undefined,
    censusRegister: undefined,
    registeredHk: undefined
  }
  formRef.value?.resetFields()
}


/** 初始化 **/
onMounted(() => {

  getList()
})
</script>
